<!DOCTYPE html>
<html lang='zh-cn'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>鼠标悬停显示图片边框动画</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      position: relative;
      width: 400px;
      overflow: hidden;
      margin:0  auto
    }

    .wrap img {
      width: 100%;
    }

    .line-wrap {
      position: absolute;

      width: 80%;
      height: 80%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }

    .line {
      position: absolute;
      transition: .5s;
      opacity: 0;
    }

    .line-row {
      width: 100%;
      height: 1px;
      background-color: #fff;
      /* 下面这个是需要渐变的话用 */
      background: linear-gradient(to right, rgba(255, 255, 255, .3), #fff, rgba(255, 255, 255, .3));
    }

    .line-column {
      width: 1px;
      height: 100%;
      background-color: #fff;
      /* 下面这个是需要渐变的话用 */
      /* background: linear-gradient(to bottom, rgba(255, 255, 255, .3), #fff, rgba(255, 255, 255, .3)); */
    }

    .line-top {
      top: 0;
      left: -80%;
    }

    .line-bottom {
      bottom: 0;
      right: -80%;
    }

    .line-left {
      left: 0;
      top: -80%;
    }

    .line-right {
      right: 0;
      bottom: -80%;
    }

    .wrap:hover .line {
      opacity: 1;
    }

    .wrap:hover .line-top {
      left: 0;
    }

    .wrap:hover .line-left {
      top: 0;
    }

    .wrap:hover .line-right {
      bottom: 0;
    }

    .wrap:hover .line-bottom {
      right: 0;
    }
  </style>
</head>

<body>
  <div class='wrap'>
    <div class='line-wrap'>
      <span class='line line-top line-row'></span>
      <span class='line line-left line-column'></span>
      <span class='line line-right line-column'></span>
      <span class='line line-bottom line-row'></span>
    </div>
    <img src='img/1.webp' alt='!'>
  </div>
</body>

</html>